<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Index</title>
<link href="/main/css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="/main/js/jquery.min.js"></script>
<link href="/main/css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="/main/js/bootstrap.js"></script>

<!--<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>-->
<!--<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/>-->
<script src="/main/js/responsiveslides.min.js"></script>
	<script>
		$(function () {
		  $("#slider").responsiveSlides({
			auto: true,
			nav: true,
			speed: 500,
			namespace: "callbacks",
			pager: true,
		  });
		});
	</script>
    <style>
        .articles {
            margin: 4em 0;
        }
        .article {
            border-bottom: 1px solid #eee;
            margin-top: 3.5em;
            padding-bottom: 3em;
        }
        .article-left {
            width: 0%;
            float: left;
            margin-right:3%;
        }
        .article-right {
            float: right;
            width: 100%;
        }
    </style>
	<script type="text/javascript" src="/main/js/move-top.js"></script>
	<script src="/main/js/template-web.js"></script>
	<script type="text/javascript" src="/main/js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
				});
			});
</script>
</head>
<body>
	<!-- header-section-starts-here -->
    <div th:fragment="navbar">
		<div class="header">
		    <div class="header-bottom">
                <div class="navigation">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="wrap">
                            <!--/.navbar-header-->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav">
                                         <li class="active"><a href="/main/index">SOCIAL BLOG</a></li>
                                         <li><a href="/main/columnList"><h4>博客专栏</h4></a></li>
                                        <li><a href="javascript:void(0)" onclick="OpenPersonPage(this)"><h4 >个人主页</h4></a></li>
                                        <input type="hidden" th:value="${session.user}" id="sessionUser">
                                        <script type="text/javascript">
                                            function OpenPersonPage(obj) {
                                                var sessionUser = document.getElementById("sessionUser").value;
                                                if(sessionUser!=null & sessionUser!=""){
                                                    window.open("/main/personal/"+sessionUser);
                                                }else {
                                                    alert("请先登录!!")
                                                    window.open("/user/login")
                                                }
                                            }
                                        </script>
                                        <li><a href="/cit"><h4>博客管理</h4></a></li>
                                        <li><a href="/main/pageList"><h4>文章库</h4></a></li>
                                        <li th:if="${session.user == null}"><a href="/user/login" ><h4>登录</h4></a></li>
                                        <li th:if="${session.user != null}"><a href="/user/logout"><h4>登出</h4></a></li>
                                        <div class="clearfix"></div>
                                    </ul>
                                    <div class="search">
                                        <!-- start search-->
                                        <div class="search-box">
                                            <div id="sb-search" class="sb-search">
                                                <form>
                                                    <input class="sb-search-input" placeholder="输入查询内容。。。" type="search" name="search" id="search"/>
                                                    <input class="sb-search-submit" type="submit" value=""/>
                                                    <span class="sb-icon-search"> </span>
                                                </form>
                                            </div>
                                        </div>
                                        <!-- search-scripts -->
                                        <script src="/main/js/classie.js"></script>
                                        <script src="/main/js/uisearch.js"></script>
                                        <script>
                                                new UISearch(document.getElementById( 'sb-search' ) );
                                            </script>
                                        <!-- //search-scripts -->
                                    </div>
                                        <div class="clearfix"></div>
                                </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

	<!-- header-section-ends-here -->
	<div class="wrap">

	</div>

	<!-- content-section-starts-here -->
	<div class="main-body">
		<div class="wrap">
			<div class="col-md-8 content-left">
				<!--content 开始-->
				<!--<iframe id="mainIframe" src="/main/content" scrolling="no" marginheight="0px" height="2300px" width="100%" marginwidth="0px" border="0px" frameborder="no" allowTransparency="true" allowfullscreen ></iframe>-->
                <div th:include="/main/content :: indexContent"></div>
                <!--content结束-->
            </div>

			<div class="col-md-4 side-bar">
			<div class="first_half">
				<div class="newsletter">
					<h1 class="side-title-head">登录状态</h1>
					<!--<p class="sign">登录可评论文章和管理博客内容</p>-->


                    <a th:if="${session.user != null}"><a href="#" class="logo"><img id="img" src="/images/head1.jpg" th:width="80px" height="80px" /></a></a>
                    <!--<a th:if="${session.user == null}"><a href="/user/login" class="logo"><img src="/images/unlogin.jpg" th:width="80px" height="80px" alt="" /></a></a>-->

                    <a th:if="${session.user == null}">&nbsp;未登录</a>
                    <a th:if="${session.user != null}">
                        <b class="sign" th:text="${session.user}"></b> 正在登录</a>
                <input type="hidden" th:value="${session.user}" id="userId" />
                    <script>
                        $(document).ready(function () {
                            var user = document.getElementById("userId").value;
                            $.ajax({
                                type: "post",
                                dataType: "json",
                                url: '/main/userMes/' + user,
                                timeout: 20000,
                                cache: false,
                                success: function (data) {
                                    document.getElementById("img").src = data.head;
                                }
                            })
                        })
                    </script>
				</div>
				<div class="list_vertical">
		        <section class="accordation_menu">
						</section>
					 </div>
					 </div>
					 <div class="secound_half">
						 <!--标签栏 全部标签 限量20-->
                         <div th:fragment="tags">
					        <div class="tags">

						<header>
							<h3 class="title-head">Tags</h3>
						</header>
						 <script type="text/javascript">
                             var h1 ='';
                             $(document).ready(function () {
                                 var url = '/main/tag/tags';
                                 $.ajax( {
                                     type : "post",
                                     dataType:"json",
                                     url : url,
                                     timeout : 20000,
                                     cache : false,
                                     success : function(data) {
//                alert(JSON.stringify(data.column[0]));
                                         h1 = template('tags', data);
                                         document.getElementById('tagContent').innerHTML = h1;
                                     }

                                 });
                             })
                             function randomy() {
                                 return Math
                                     .random();
                             }
						 </script>


							<script type="text/html" id="tags">
								{{each tags value i}}
								<a id="tagName" class="tag{{i}}" href="/main/tag/returnTagPage/{{value}}" >{{value}} </a>
								{{/each}}

							</script>

						 <p id="tagContent"></p>

					 </div>
                         </div>
                         <!--标签tag 结束-->
                     <div th:fragment="threeDoubleLabel">
                        <!--右侧 三重合label ajax数据显示 开始-->
                         <div class="list_vertical">
                                 <section class="accordation_menu">
                                     <div>
                                         <input id="label-1" name="lida" type="radio" checked/>
                                         <label for="label-1" id="item1"><i class="ferme"> </i>一月内热文排行<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
                                         <div class="content" id="a1">
                                             <div class="scrollbar" id="style-2">
                                                 <div class="force-overflow">
                                                     <div class="popular-post-grids">
                                                         <script type="text/html" id="hotPaper">
                                                             <div class="popular-post-grid">

                                                                 <div class="post-text">
                                                                     <a class="pp-title" href="/main/paper/{{id}}"> {{title}}</a>
                                                                     <p>{{create_time}} <a class="span_link" href="#"> &nbsp;&nbsp;&nbsp;观看数:<span class="glyphicon glyphicon-eye-open"></span>{{mark}} </a></p>
                                                                 </div>
                                                                 <div class="clearfix"></div>
                                                             </div>
                                                         </script>
                                                         <script type="text/javascript">
                                                             var hotPaper ='';
                                                             $(document).ready(function () {
                                                                 var url = '/main/paper/hotPapersInMonth';
                                                                 $.ajax( {
                                                                     type : "post",
                                                                     dataType:"json",
                                                                     url : url,
                                                                     timeout : 20000,
                                                                     cache : false,
                                                                     success : function(data) {
                                                                         var i;
                                                                         for(i in data.list){
                                                                             hotPaper = template('hotPaper', data.list[i])+hotPaper;
                                                                         }
                                                                         document.getElementById('hotPaperInMonth').innerHTML = hotPaper;
                                                                     }

                                                                 });
                                                             })
                                                         </script>
                                                         <div id="hotPaperInMonth"></div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div>
                                         <input id="label-2" name="lida" type="radio"/>
                                         <label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>热门主题<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
                                         <div class="content" id="a2">
                                             <div class="scrollbar" id="style-2">
                                                 <div class="force-overflow">
                                                     <div class="popular-post-grids">
                                                         <script type="text/html" id="hotTheme">
                                                             <div class="popular-post-grid">
                                                                 <div class="post-img">
                                                                     <a href="/main/columnItem/{{id}}"><img src="{{image}}" width="100" style="height: 80px" alt="" /></a>
                                                                 </div>
                                                                 <div class="post-text">
                                                                     <a class="pp-title" href="/main/columnItem/{{id}}"> {{title}}</a>
                                                                     <p>{{c_create_time}}"></p>
                                                                 </div>
                                                                 <div class="clearfix"></div>
                                                             </div>
                                                         </script>
                                                         <script type="text/javascript">
                                                             hotTheme ='';
                                                             $(document).ready(function () {
                                                                 var url = '/main/column/findColumnByCount';
                                                                 $.ajax( {
                                                                     type : "post",
                                                                     dataType:"json",
                                                                     url : url,
                                                                     timeout : 20000,
                                                                     cache : false,
                                                                     success : function(data) {

                                                                         // alert(data.column[1].c_create_time)
                                                                         var i;
                                                                         var j;
                                                                         for(i in data.column){
                                                                             hotTheme = template('hotTheme', data.column[i])+hotTheme;
                                                                         }
                                                                         document.getElementById('hotThemeContent').innerHTML = hotTheme;
                                                                     }

                                                                 });
                                                             })
                                                         </script>
                                                         <div id="hotThemeContent"></div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div>
                                         <input id="label-3" name="lida" type="radio"/>
                                         <label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i>旧文新评<i class="icon-plus-sign i-right1"></i><i class="icon-minus-sign i-right2"></i></label>
                                         <div class="content" id="a3">
                                             <div class="scrollbar" id="style-2">
                                                 <div class="force-overflow">
                                                     <div class="response">
                                                         <script type="text/html" id="recentComment">
                                                             <div class="media response-info">
                                                                 <div class="media-left response-text-left">
                                                                     <a href="/main/paper/{{paper_id}}">
                                                                         <img class="media-object" src="{{paper_image}}" height="50" style="width: 80px" alt="" />
                                                                     </a>
                                                                     <h5><a href="/main/paper/{{paper_id}}">{{title}}</a></h5>
                                                                 </div>
                                                                 <div class="media-right response-text-right">
                                                                     <p>{{comments_user_name}} Ref: {{comments_content}}</p>
                                                                     <ul>
                                                                         <li>{{comments_time}}</li>
                                                                         <li><a href="/main/paper/{{paper_id}}">Reply</a></li>
                                                                     </ul>
                                                                 </div>
                                                                 <div class="clearfix"> </div>
                                                             </div>
                                                         </script>
                                                         <script type="text/javascript">
                                                             var recentComment ='';
                                                             $(document).ready(function () {
                                                                 var url = '/main/comments/commentsWithPaperAndUserMes';
                                                                 $.ajax( {
                                                                     type : "post",
                                                                     dataType:"json",
                                                                     // dataType:"application/json;charset=UTF-8",
                                                                     url : url,
                                                                     timeout : 20000,
                                                                     cache : false,
                                                                     success : function(data) {
                                                                         var i;
                                                                         var j;
                                                                         for(i in data.comments){
                                                                             recentComment = template('recentComment', data.comments[i])+recentComment;
                                                                         }
                                                                         document.getElementById('recentCommentContent').innerHTML = recentComment;
                                                                     }

                                                                 });
                                                             })
                                                         </script>
                                                         <div id="recentCommentContent"></div>
                                                     </div>
                                                 </div>

                                             </div>
                                         </div>
                                     </div>

                                 </section>

                             </div>
                        <!--右侧 三重合label ajax数据显示 结束 在div class=first_half里面-->
                     </div>
                         <!--popular-news 开始-->
                         <div th:fragment="popular-news">
                            <div class="popular-news">
                            <header>
                                <h3 class="title-popular">精品文章</h3>
                            </header>
                             <!-- 侧边栏热门文章 art-templete 开始-->
                             <script type="text/html" id="post_list">
                                 <div class="popular-grid">
                                     <a href="/main/paper/{{id}}"><img src="{{paper_image}}" alt="" /></a>
                                     <a class="title" href="/main/paper/{{id}}">{{title}}</a>
                                     <p href="single.html">{{segment}}</p>
                                     <p>{{create_time}} <a class="span_link" href="#"><span class="glyphicon glyphicon-comment"></span>{{count}} </a><a class="span_link" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>{{mark}}</a></p>
                                 </div>
                             </script>
                             <script type="text/javascript">
                                 var html3 ='';
                                 $(document).ready(function () {
                                     url = '/main/paper/PapersByMark';
                                     $.ajax( {
                                         type : "post",
                                         dataType:"json",
                                         url : url,
                                         timeout : 20000,
                                         cache : false,
                                         success : function(data) {
    //                alert(JSON.stringify(data.column[0]));
                                             var i;
                                             var j;
                                             for(i in data.paper){
                                                 html3 = template('post_list', data.paper[i])+html3;
                                             }
                                             document.getElementById('content4').innerHTML = html3;
                                         }

                                     });
                                 })
                             </script>
                            <div class="popular-grids">
                                <div id="content4"></div>
                            </div>
                             <!-- 侧边栏热门文章 art-templete 结束-->
                        </div>
                         </div>
                         <!--popular-news 结束-->
					</div>
					<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- content-section-ends-here -->
     <div th:fragment="footer-section">
	<!-- footer-section-starts-here -->
	            <div class="footer">
		<div class="footer-top">
			<div class="wrap">
				<div class="col-md-4 col-xs-6 col-sm-4 footer-grid">
					<h4 class="footer-head">关于我们</h4>
					<p>学校地址:xxxx-xxxx-xxxx-xxxx-xxxx-xxxx</p>
                    <p>小组成员:xxxx-xxxx-xxxx-xxxx-xxxx-xxxx</p>
                    <p>使用框架:xxxx-xxxx-xxxx-xxxx-xxxx-xxxx</p>
                    <p>查阅资料:xxxx-xxxx-xxxx-xxxx-xxxx-xxxx</p>
				</div>
				<div class="col-md-4 col-xs-8 col-sm-2 footer-grid">
					<h4 class="footer-head">分类</h4>
					<ul class="cat">
						<li><a href="business.html">主页</a></li>
						<li><a href="technology.html">博客专栏</a></li>
						<li><a href="entertainment.html">个人主页</a></li>
						<li><a href="sports.html">博客管理</a></li>
						<li><a href="shortcodes.html">文章库</a></li>
					</ul>
				</div>

				<div class="col-md-4 col-xs-8 footer-grid">
					<h4 class="footer-head">联系我们</h4>
					<address>
						<ul class="location">
							<li><span class="glyphicon glyphicon-map-marker"></span></li>
							<li>成都职业技术学院</li>
							<div class="clearfix"></div>
						</ul>
						<ul class="location">
							<li><span class="glyphicon glyphicon-earphone"></span></li>
							<li>1568-2114-894</li>
							<div class="clearfix"></div>
						</ul>
						<ul class="location">
							<li><span class="glyphicon glyphicon-envelope"></span></li>
							<li><a href="mailto:info@example.com">2746421823@qq.com</a></li>
							<div class="clearfix"></div>
						</ul>
					</address>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>

	</div>
	<!-- footer-section-ends-here -->
            </div >
	<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				wrapID: 'toTop', // fading element id
				wrapHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!----></div>

</body>
</html>
